<template>
  <div class="page-header">
    <!-- 左侧区域：包含标题、副标题和统计数据 -->
    <div class="page-header__left">
      <!-- 标题区域 -->
      <div class="page-header__title-area">
        <!-- 主标题 -->
        <h2 class="page-header__title">{{ title }}</h2>
        <!-- 副标题/描述文本 -->
        <p v-if="subtitle" class="page-header__subtitle">{{ subtitle }}</p>
      </div>

      <!-- 统计数据区域 -->
      <div v-if="stats?.length" class="page-header__stats">
        <template v-for="(stat, index) in stats" :key="index">
          <!-- 统计项 -->
          <div class="page-header__stat-item">
            <span class="page-header__stat-label">{{ stat.label }}</span>
            <span 
              class="page-header__stat-value" 
              :class="[
                { 'page-header__stat-value--success': stat.type === 'success' },
                { 'page-header__stat-value--warning': stat.type === 'warning' },
                { 'page-header__stat-value--danger': stat.type === 'danger' },
                { 'page-header__stat-value--highlight': stat.highlight }
              ]"
            >
              {{ stat.value }}
            </span>
          </div>
          <!-- 分隔符 -->
          <div v-if="index !== stats.length - 1" class="page-header__divider" />
        </template>
      </div>
    </div>

    <!-- 右侧区域：通过插槽实现自定义内容 -->
    <div v-if="$slots.right" class="page-header__right">
      <slot name="right" />
    </div>
  </div>
</template>

<script setup>
/**
 * 页面头部组件
 * 
 * 提供标准化的页面头部布局，包括标题、副标题、统计数据和右侧操作区
 * 采用BEM命名规范，响应式设计
 */
defineProps({
  /** 页面标题 */
  title: {
    type: String,
    required: true,
  },
  /** 副标题或描述文本 */
  subtitle: {
    type: String,
    default: '',
  },
  /**
   * 统计数据配置
   * @type {Array<{
   *   label: string,        // 标签文本
   *   value: string|number, // 统计值
   *   type?: 'success'|'warning'|'danger', // 样式类型
   *   highlight?: boolean   // 是否高亮显示
   * }>}
   * @example
   * [
   *   { label: '总数', value: 100, highlight: true },
   *   { label: '成功', value: 80, type: 'success' },
   *   { label: '失败', value: 20, type: 'danger' }
   * ]
   */
  stats: {
    type: Array,
    default: () => [],
  },
})
</script>

<style lang="scss" scoped>
@use '@/assets/styles/theme/base.scss' as *;
@use '@/assets/styles/mixins.scss' as *;
@use 'sass:color';

/**
 * 页面头部组件样式 
 * 使用BEM命名规范组织样式
 */
.page-header {
  // 基础布局
  @include flex-between;
  margin-bottom: 16px;
  width: 100%;
  padding: 16px 24px;

  // 左侧区域
  &__left {
    flex: 1;
    min-width: 0; // 防止子元素溢出
  }

  // 标题区域
  &__title-area {
    margin-bottom: 8px;
  }

  // 主标题
  &__title {
    font-size: $font-size-h3;
    font-weight: 600;
    color: $text-primary;
    margin: 0;
    line-height: 1.4;
    @include text-ellipsis; // 文本溢出省略
  }

  // 副标题
  &__subtitle {
    font-size: $font-size-small;
    color: $text-secondary;
    margin: 4px 0 0;
    @include text-ellipsis; // 文本溢出省略
  }

  // 统计数据区域
  &__stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
  }

  // 统计项
  &__stat-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  // 统计标签
  &__stat-label {
    font-size: $font-size-small;
    color: $text-secondary;
  }

  // 统计值
  &__stat-value {
    font-size: $font-size-h4;
    font-weight: 600;
    color: $text-primary;
    @include transition(color); // 使用混合器实现过渡效果

    // 不同状态的颜色
    &--success {
      color: $color-success;
    }

    &--warning {
      color: $color-warning;
    }

    &--danger {
      color: $color-danger;
    }

    // 高亮效果
    &--highlight {
      font-size: $font-size-h3;
      color: $color-primary;
      font-weight: 600;
    }
  }

  // 分隔线
  &__divider {
    width: 1px;
    height: 20px;
    background-color: rgba($text-secondary, 0.15);
  }

  // 右侧区域
  &__right {
    margin-left: 24px;
    display: flex;
    align-items: center;
    height: 40px;
    gap: 12px;
  }

  // 响应式适配
  @include respond-to('sm') {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    &__right {
      margin-left: 0;
      width: 100%;
      height: auto;

      // 让按钮等元素自适应宽度
      :deep(.el-button) {
        flex: 1;
      }
    }

    &__stats {
      flex-wrap: wrap;
      gap: 12px;
    }

    &__divider {
      display: none; // 移动端隐藏分隔线
    }

    &__stat-item {
      flex: 1;
      min-width: 120px;
      justify-content: center;
      text-align: center;
    }
  }
}
</style>
